<template>
    <div id="logger">

        <div class="login-shade" @click="close"></div>

        <div class="login-body">
            <div>
                <div class="login-close" @click="close"></div>
                <div class="login-title">绑定手机号</div>
                <div class="login-input">
                    <input type="tel" maxlength="11" placeholder="您的手机号" v-model="phone">
                </div>
                <div class="login-input">
                    <div :class="['login-getvec', canGetCaptcha?'':'un']" @click="getCaptcha">
                        {{wait<=0?'获取验证码':'剩余'+wait+'秒'}}
                    </div>
                    <input type="tel" maxlength="6" placeholder="收到的验证码" v-model="captcha">
                </div>
                <button :class="['login-button', canLogin?'':'un']" @click="login">进入商城</button>

                <div class="can_not_receive_captcha"><a href="https://mp.weixin.qq.com/s?__biz=MzAwODg1MDkxMQ==&mid=100000028&idx=1&sn=ccb8a0429f06dc53c78aa2d705e47157&scene=0&previewkey=KYTqD0fpc2NmUYC1DC4Pcp1iJUUG%2F7eLf7OA%2FVEtaJE%3D&key=b28b03434249256b30203c6b62ce3955ec838970545c3dd32c026620e1638cf4e9a1e456c8924546f10ac30f460dac2c&ascene=0&uin=MTA2MzIxNjU%3D&version=11020201&pass_ticket=%2FJ%2F2V8TwUQPaWmuur%2FFlyflSzqapfx%2BRFMcnRekVn6U%3D
">收不到验证码?</a></div>
            </div>
        </div>
    </div>
</template>

<script>
    import Auth from '../services/auth';
    import http from '../libs/http'

    var waitTask;

    export default{
        data(){
            return {
                phone: '',
                captcha: '',
                wait: 0
            }
        },

        computed: {
            canGetCaptcha: function () {
                return this.phone.length == 11 && this.wait <= 0;
            },
            canLogin: function () {
                return this.phone.length == 11 && this.captcha.length == 6;
            }
        },
        methods: {
            close: function () {
                this.$dispatch('close-login');
            },
            login: function () {
                var self = this;

                if (self.canLogin) {

                    Auth.login(self.phone, self.captcha, function (obj) {
                        if (obj.code == 0){
                            self.$dispatch('toast', '登录成功');
                            self.$dispatch('close-login');
                        }
                    })
                }
            },
            getCaptcha: function () {
                var self = this;

                if (self.canGetCaptcha) {
                    self.startCaptchaWait();

                    http.get({
                        url: api + 'user/registerCaptcha', jsonp: true,
                        data: {
                            phone: self.phone
                        }
                    }).then(function (obj) {
                        if (obj.code == 0)
                            self.$dispatch('toast', '发送成功');
                    });
                }
            },
            startCaptchaWait: function () {

                var self = this;

                if (waitTask) {
                    clearInterval(waitTask);
                }

                self.wait = 60;

                waitTask = setInterval(function () {
                    self.wait--;
                    if (self.wait == 0) {
                        clearInterval(waitTask);
                    }
                }, 1000)
            }
        }
    }
</script>

<style scoped>
    .login-shade {
        position: fixed;
        width: 100%;
        height: 150%; /* 150%是为了在ios滑动中锁死webview也不会产生BUG */
        bottom: 0;
        left: 0;
        opacity: 1;
        z-index: 200;
        transition: opacity 0.3s;
        -webkit-transition: opacity 0.3s;
        background: rgba(0, 0, 0, 0.4);
    }

    .login-body {
        position: fixed;
        transition: width 0.2s;
        top: 50%;
        left: 50%;
        margin-left: -153px;
        margin-top: -101px;
        width: 306px;
        height: 232px;
        background: #fafafa;
        -webkit-transition: height 0.2s;
        z-index: 202;
    }

    .login-body > div {
        text-align: center;
        padding: 8px;
        opacity: 1;
        transition: opacity 0.1s;
        -webkit-transition: opacity 0.1s;
    }

    .login-title {
        padding: 10px;
        font-size: 14px;
        color: #888888;
    }

    .login-close {
        position: absolute;
        right: 0;
        margin: 12px 16px;
        width: 12px;
        height: 12px;
        float: right;
        background: url(../../static/img/ic_close.png) no-repeat center;
        background-size: contain;
    }

    .login-getvec.un {
        color: #bbb;
    }

    .login-getvec {
        position: absolute;
        right: 8px;
        text-align: center;
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        color: #000;
    }

    .login-input > input {
        letter-spacing: 0.1em;
        border-radius: 0;
        margin-bottom: 8px;
        border-bottom: solid 1px #f0f0f0;
        text-indent: 8px;
        height: 44px;
        display: block;
        width: 100%;
    }

    .login-button.un {
        background: #dddddd;
        color: #888888;
    }

    .login-button {
        display: block;
        width: 100%;
        background: #f9e043;
        height: 44px;
        line-height: 44px;
        font-size: 16px;
    }

    .can_not_receive_captcha {
        height: 30px;

        text-align: center;
        font-size: 12px;
        color: #bbb;
        line-height: 30px;
        margin-top: 5px;
    }

</style>